<template>
  <div>
    <div :style="{ 'height': windowHeight }">
      <div class="login" style="background-image: none;">
        <div class="loginDiv">
          <div class="websocket-notify">
            <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
            <el-dialog :visible.sync="formOpen" :title="title" :close-on-click-modal="false" custom-class="dialogForm">
              <component :is="eventPath" ref="eventPathRef" />
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAsyncComponent } from '@/utils'
import { getSysFormCacheByKey } from '@/api/sys/formCache/sysFormCache'

export default {
  data() {
    return {
      windowHeight: document.body.clientHeight + 'px',
      windowWidth: document.body.clientWidth + 'px',
      loading: false,
      eventPath: '',
      title: '',
      formOpen: false
    }
  },
  computed: {
  },
  watch: {
    formOpen: {
      handler(val) {
        if (!val) {
          window.close()
        }
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化数据
    init() {
      console.log('打开通知页面')
      this.loading = true
      getSysFormCacheByKey('browser_notice_' + this.$route.query.noticeId, this.$route.query.noticeId).then(response => {
        this.loading = false
        if (response.data) {
          this.open(response.data.cacheValue)
        } else {
          this.errorClose()
        }
      }).catch(() => {
        this.loading = false
      })
    },
    open(data) {
      if (data) {
        try {
          data = (typeof (data) === 'string') ? JSON.parse(data) : data
          data.id = this.isEmpty(data.id) ? data.dataId : data.id
          this.eventPath = getAsyncComponent(data.component)
          this.title = data.title || ''
          this.formOpen = true
          this.$bus.$once('async_done', () => {
            this.$nextTick(() => {
              this.$refs.eventPathRef && this.$refs.eventPathRef.init(data)
            })
          })
        } catch (e) {
          console.error(e)
          this.errorClose()
        }
      } else {
        this.errorClose()
      }
    },
    errorClose() {
      alert(this.$t('未能获取到数据, 联系管理人员!'))
      // window.close()
    }
  }
}
</script>

<style scoped>
.fileListPcClass {
  height: 90%;
  width: 90%;
  margin: auto;
  background: white;
  margin-top: 5%;
  padding: 30px;
}
.fileListMobileClass {
  margin: auto;
  background: white;
  padding: 15px;
}
/deep/ .el-collapse-item__header {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
